<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>详情</title>
	<link href="../../css/bootstrap.css" type="text/css" media="screen" rel="stylesheet" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<style type="text/css">
		body.dashboard{
			background-color: #FBFBFB;
			/*font-family:"方正兰亭黑简体";*/
			font-family: "-apple-system-font,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif";
		}
		a {
			color: #606266;
			display: block;
			text-decoration: none !important;
		}
		a:hover,a:focus {
			color: #606266;
		}
		ul,li{
			list-style:none;
			padding: 0;
		}
		hr{
			border-top:1px solid #d8d8d8;
		}
		.fs12{
			font-size: 12px;
		}
		.fs14{
			font-size: 14px;
		}
		.fs16{
			font-size: 16px;
		}
		.fs24{
			font-size: 18px;
		}
		.fs18{
			font-size: 18px;
		}
		.fw700{
			font-weight:700;
		}
		.c3{
			color: #606266;
		}
		.c4d{
			color: #4d4d4d;	
		}
		.c9{
			color: #999;
		}
		.c80{
			color: #808080;
		}
		.c926fab{
			color: #926fab;
		}
		.cbe{
			color: #bebebe;
		}
		.c4a90e2{
			color: #4a90e2;
		}
		.mt10{
			margin-top: 10px;
		}
		.mt50{
			margin-top: 50px;
		}
		.mt30{
			margin-top: 20px;
		}
		.body-warp{
			width: 100%;
		}
		.body-content{
			width: 1300px;
			margin: 75px auto 0;
			border: 1px solid #d8d8d8;
			border-radius: 10px;
		}
		.mian-width {
			width: 1300px;
			margin: 0 auto;
		}
		.first-page{
			width: 94%;
			margin: 0 auto;
			overflow: hidden;
			padding: 40px 0;
		}
		.first-page-left{
			float: left;
			width: 350px;
			border: 1px solid #d8d8d8;
			text-align: center;
			padding: 20px 0;
			border-radius: 10px;
		}
		.first-page-left img{
			width: 90%;
		}
		.first-page-right{
			float: left;
			width: 730px;
			margin-left: 60px;
			/*padding: 4% 0;*/
		}
		.left-img-content{
			width: 90%;
			margin: 15px auto;
			text-align: left;
		}
		.first-page-right-top{
			width: 100%;
			/*overflow: hidden;*/
		}
		.left-company{
			width: 80%;
			float: left;
			/*overflow: hidden;*/
		}
		.company-logo{
			/*width: 80px;
			height: 80px;*/
			
			float: left;
			border-radius: 50%;
			
		}
		.company-logo img{
			width: 70px;
			height: 70px;
			border-radius: 50%;
			border:1px solid #d8d8d8;
			-moz-box-shadow:2px 2px 13px #919191; -webkit-box-shadow:2px 2px 13px #919191;box-shadow:2px 2px 13px #919191;
		}
		.company-name{
			width: 80%;
			float: left;
			margin-left: 15px;
		}
		.right-company{
			width: 20%;
			float: right;
		}
		.company-collect{
			width: 30px;
			height: 30px;
			cursor:pointer;
		}
		.heat-width{
			display: inline-block;
			width: 124px;
		}
		.main-time,.main-count,.circle-data{
			width: 100%;
		}
		.main-count-li{
			width: 70%;
			overflow: hidden;
		}
		.main-count-li li{
			width: 50%;
			float: left;
			line-height: 30px;
		}
		.circle-data{
			overflow: hidden;
		}
		.circle{
			float: left;
			width: 50%;
		}
		.graph-data{
			width: 94%;
			margin: 0 auto;
		}
		.tendency{
			width: 100%;
			overflow: hidden;
		}
		.w45{
			width: 45%;
		}
		.fl-left{
			float:left;
		}
		.fl-right{
			float: right;
		}
		.tendency-img-left{
			width: 100%;
			height: 300px;
			border: 1px solid #D8D8D8;
			border-radius: 5px;
		}
		.tendency-title{
			margin-bottom: 10px;
		}
		.index-button-a {
			width: 110px;
			text-align: center;
			border:1px solid #4a90e2;
			border-radius: 5px;
			padding: 2px 10px;
			cursor:pointer;
		}
		.index-button-a a{
			display: inline-block;
			color:#4a90e2;
		}
		a.examine-a{
			cursor:pointer;
			color:#4a90e2;
			display: inline;
			margin-left: 5px;
		}
		a.examine-a:hover,a.examine-a:focus {
			color: #4a90e2;
		}
		.clear{
			clear:both
		} 
	</style>
</head>
<body class="dashboard">
	<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
		<div class="mian-width">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html"><img src="../../images/icon.png" style="margin-right: 5px" /></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav pull-right">
					<li class="dropdown g-theme">
						<a class="btn-login" href="javasrcipt:;" id="btnLogin">
							登录
						</a>

					</li>
					<li class="dropdown g-theme">
						<a class="btn-login btn-register" href="javasrcipt:;">
							注册
						</a>

					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="body-warp">
		<div class="body-content">
			<div class="first-page">
				<div class="first-page-left">
					<img src="../../images/1.jpeg"/>
					<div class="left-img-content">
						<div class="fw700 fs16">Wish</div>
						<div class="c3 fs12">Shopping Made Fun. Join over 30 million others that have made their shopping more smart, fun, and rewarding.</div>
						<div class="mt10 index-button-a">
							<a>链接</a>
						</div>
					</div>
				</div>
				<div class="first-page-right">
					<div class="first-page-right-top">
						<div class="left-company">
							<div class="company-logo">
								<img src="../../images/logo.png"/>
							</div>
							
							<div class="company-name">
								<div class="company-name-title fs24 fw700 c4d">广东原昇信息科技有限公司</div>
								<div class="fs14 c4d mt10 c9">
									<span>一家网络公司打发打发供热个人个人拖后腿发额发额发色发泛发大水发的说法发额发发额发额非阿尔法而非额而非啊发额发艾尔无法仍无法安慰</span>
									<a class="examine-a">查看全部</a>
									
								</div>
							</div>
							<img src="../../images/x1.png" class="company-collect"/>
						</div>
						<!--<div class="right-company">
							<img src="../../images/x1.png" class="company-collect"/>
						</div>-->
						<div class="left-company mt50">
							<span class="heat-width">
								<img src="../../images/1.png"/>
								<span class="cbe">10</span>
							</span>
							<span class="heat-width">
								<img src="../../images/2.png"/>
								<span class="cbe">100</span>
							</span>
							<span class="heat-width">
								<img src="../../images/3.png"/>
								<span class="cbe">100</span>
							</span>
						</div>
					</div>
					<div class="clear"></div> 
					<hr />
					<div class="main-time">
						<div class="mt30">
							<label class="c4d">时间：</label>
							<span class="c80">2018-10-24~2018-10-25</span>
						</div>
						<div class="mt30">
							<label class="c4d">广告投放：</label>
							<span class="c80">Mobile</span>
						</div>
						<div class="mt30">
							<label class="c4d">目标：</label>
							<span class="c80">Comming Soon</span>
						</div>
					</div>
					<hr />
					<div class="main-count">
						<ul class="main-count-li">
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c926fab">120</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c926fab">1220</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c926fab">120</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c926fab">1220</span>
							</li>
						</ul>
					</div>
					<hr />
					<div class="circle-data">
						<div class="circle">
							<div id="circles-1" style="width: 200px;height:120px;"></div>
						</div>
						<div class="circle">
							<div id="circles-2" style="width: 200px;height:120px;"></div>
						</div>
					</div>
				</div>
				
			</div>
			<div class="graph-data">
				<hr />
				<div class="tendency">
					<div class="fl-left w45">
						
						<div class="tendency-title">趋势图</div>
						
							<div class="tendency-img-left" id="tendencyImgLeft"></div>
						
						
					</div>
					<div class="fl-right w45">
						<div class="tendency-title">趋势图</div>
						<div class="tendency-img-left" id="tendencyImgRight"></div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</body>

<script type="text/javascript">
$(function(){
	
	    
	    circles1();
	    
	    circles2();
	    
	   tendencyImgLeft();
	   tendencyImgRight();
})

function circles1(){
	var option = {
        backgroundColor:"",
        color:"#36a6e5",
        title: {
            text: '',
            top:'3%',
            left:'1%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 14,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    },
                    formatter:'{b}\n{c}%'
                }
            },
            data: [{
                    value: 20,
                    name: '发现率',
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-20,
                    name: ''
                }
            ]
        }]
    };

	    var myChart = echarts.init(document.getElementById('circles-1'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
function circles2(){
	var optiona = {
        backgroundColor:"",
        color:"#49dfff",
        title: {
            text: '',
            top:'3%',
            left:'1%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 14,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    },
                    formatter:'{b}\n{c}%'
                }
            },
            data: [{
                    value: 30,
                    name: '展现率',
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-20,
                    name: ''
                }
            ]
        }]
    };

	    var myChart = echarts.init(document.getElementById('circles-2'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(optiona);
}
	
function tendencyImgLeft(){
	var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    color: 'rgba(124,181,236,0.75)',
	    series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line',
	        areaStyle: {},
	        itemStyle :{
	        	normal :{
	        		lineStyle:{
	        			color:"rgba(124,181,236,0.75)"
	        		}
	        	}
	        }
	    }]
	};
	var myChart = echarts.init(document.getElementById('tendencyImgLeft'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
function tendencyImgRight(){
	var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    color: 'rgba(124,181,236,0.75)',
	    series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line',
	        areaStyle: {},
	        itemStyle :{
	        	normal :{
	        		lineStyle:{
	        			color:"rgba(124,181,236,0.75)"
	        		}
	        	}
	        }
	    }]
	};
	var myChart = echarts.init(document.getElementById('tendencyImgRight'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
</script>
</html>